import { useState } from 'react'
/* -------------------------------------------------------- Declare -- */
const { $fn, $lazy } = window
/* -------------------------------------------------------- Async Component -- */
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
/* -------------------------------------------------------- Page Component -- */
const slotData = [
	{ label:'文本字典', value:'_s/dict' },
	{ label:'百分比字典', value:'_s/dict-per' }
]
const Component = () => {
	const [ expandedRowKeys, setExpandedRowKeys ] = useState([])
	// 编辑添加配置
	const addConfig = {
		modal: {
			title 		: '父菜单',
			width 		: 1000,
		},
		form: {
			labelWidth 	: 's6',
			setParam: ({ slot, component }) => ({ component: slot ? slot : component }),
			backData: ({ component }) => ( component ? { slot: component.startsWith('_s/') ? null : component, component: component.startsWith('_s/') ? component:null } : null),
			data: [
				{ label: '菜单名称',		name: 'title', 		r:1, maxLen:10, half:1 },
				{ label: '父级菜单',		name: 'parent', 	type:'tree-select', api:'menu/list', half:1},
				{ label: '路由名称',		name: 'name', 		r:1, maxLen: 30, half:1 },
				{ label: '固定组件', 	name: 'component', 	type:'select', data:slotData, half:1 },
				{ label: '自定排序',		name: 'level', 		r:1,type:'number', value:0, max:100, half:1 },
				{ label: '自定组件',		name: 'slot', 		maxLen: 50, half:1 },
				{ label: '禁用',		name: 'disabled', 	type:'radio', value:0, half:1 },
				{ label: '图标',		name: 'icon', 		maxLen:10, half:1, },
			]
		},
	}
	
	const config = {
		page : {
			title: '菜单管理',
			controls	: [
				{ label:'新增', mode:'add', r:1 },
				{ label:"启用", mode:'confirm', isKeys:1, abs:0, api:'menu/disabled', rc:1, param: { disabled:false } },
				{ label:"禁用", mode:'confirm', isKeys:1, abs:0, api:'menu/disabled', rc:1, param: { disabled:true } },
				{ mode:'refresh'},
			]
		},
		search : {
			data:[
				{ label:'菜单名称', 	name:'title' },
				{ label:'路由名称', 	name:'name' },
				{ label:'子级菜单', name:'parent', type:'tree-select', api:'menu/list', idStr:'id', nameStr:'title'},
				{ label:'是否禁用', name:'disabled', type:'select', data:$fn.boolData}
			]
		},
		table: {
			api 		: 'menu',				// 列表、增、删，改、查五合一接口
			paging 		: 0,					// 接口是否分页
			addConfig,
			clearCache 	: ['menu/dict','menu/list', 'menu'],
			row 		: {},
			cols		: [
				{ title: '菜单名称', 	dataIndex: 'title', 		width:200 },
				{ title: '路由名称', 	dataIndex: 'name', 			width:200 },
				{ title: '组件路径', 	dataIndex: 'component', 	width:200 },
				{ title: '菜单排序', 	dataIndex: 'level', 		...$fn.table.four, align:'center' }
			],
			controls 	: {
				width: 240,
				data: ({ id, disabled, rec }) => [
					{ mode:'mod', config:addConfig, abs:1 },
					{ label:disabled ? '启用' : '禁用', mode:'confirm', gray:disabled, abs:0, api:'menu/disabled', rc:1, param: { id:[id], disabled:!disabled } },
					// { mode:'delPop', abs:1, disabled },
					{ label:'添加子菜单', disabled, mode:'formModal', config: () => {
						const config = {
							...$fn.copy(addConfig), 
							r: 1,
							backData: { parent: id, disabled: disabled ? 1 : 0, level:0, rec }
						}
						config.modal.title = null
						$fn.getRow(config, 'parent').disabled = true
						
						$fn.hideRows(config, ['parent'], false)
						return config
					}}
				]
			},
			antd:{
				expandable: {
					expandedRowKeys,
					onExpand: (bool, { id }) => {
						setExpandedRowKeys( k => {
							if(bool){
								k.push( id )
							}else{
								const index = k.findIndex( v => v === id )
								k.splice(index, 1)
							}
							return k
						})
					}
				}
			},
			onUpdate: () => window.refershMenu()
		}
	}
	return <SearchTable {...config}/>
}
export default Component